import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, InputNumber, Select, message, Spin } from 'antd';
import request from '@/utils/request';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function QueryPlan({ visiable, close, status, form, planItem, queryTreeData }) {
  const { getFieldDecorator } = form;

  const [loading, setLoading] = useState(false);
  const [assTypeMap, setAssType] = useState([]);

  useEffect(() => {
    request('pmc/pms/StaticDataController/getStaticAttr.do', {
      data: {
        busiObjNbr: 'RmCatalogue',
        attrNbr: 'type',
      },
    })
      .then(res => {
        setAssType(res);
      })
      .always(() => setLoading(false));
  }, []);

  useEffect(() => {
    if (status === 'edit') {
      form.setFieldsValue({
        plan_name: planItem.name,
        plan_type: planItem.plan_type,
        retry_model: planItem.retry_model && planItem.retry_model.toString(),
        plan_sort: planItem.plan_sort,
      });
    }else if(status === 'add'){
      if(planItem.catType === '1' || planItem.catType === null || planItem.catType === undefined){
        message.warn("对应目录未设置类型，请进行设置");
        return;
      }
      form.setFieldsValue({
        plan_type: planItem.catType,
      });
    }
  }, []);

  const onSubmit = () => {
    form.validateFields((err, value) => {
      if (err) return;
      if(status === 'add'){
        if(planItem.catType === '1' || planItem.catType === null || planItem.catType === undefined){
          message.warn("对应目录未设置类型，请进行设置");
          return;
        }
      }
      setLoading(true);
      request('pmc/pms/RuleCfgController/addEditViewPlan', {
        data: {
          ...value,
          catalogue_id: status === 'edit' ? planItem.pid : planItem.id,
          action_type: status,
          plan_id: status === 'edit' ? planItem.id : '',
        },
      })
        .then(res => {
          if (res.success) {
            message.success(`${status === 'add' ? '新增' : '修改'}方案成功！`);
            queryTreeData();
            close();
          } else {
            message.error(res.errMessage);
          }
        })
        .always(() => {
          setLoading(false);
        });
    });
  };
  return (
    <Modal
      title={status === 'add' ? '新增方案' : '修改方案'}
      width="500px"
      destroyOnClose
      onCancel={close}
      visible={visiable}
      onOk={onSubmit}
    >
      <Spin spinning={loading}>
        <Form>
          <Form.Item label="方案名称" {...formItemLayout}>
            {getFieldDecorator('plan_name', {
              rules: [
                {
                  required: true,
                  message: '方案名称不能为空',
                },
              ],
            })(<Input placeholder="请输入" />)}
          </Form.Item>
          <Form.Item label="类型" {...formItemLayout}>
            {getFieldDecorator('plan_type')(
              <Select placeholder="请选择" disabled>
                {assTypeMap.map(item => {
                  return (
                    <Select.Option value={item.attrValue}>{item.attrValueName}</Select.Option>
                  );
                })}
              </Select>
            )}
          </Form.Item>
          <Form.Item label="执行方式" {...formItemLayout}>
            {getFieldDecorator('retry_model', {
              rules: [
                {
                  required: true,
                  message: '执行方式不能为空',
                },
              ],
            })(
              <Select placeholder="请选择">
                <Select.Option value="1">同步执行</Select.Option>
                <Select.Option value="2">异步执行</Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label="方案顺序" {...formItemLayout}>
            {getFieldDecorator('plan_sort')(
              <InputNumber style={{ width: '100%' }} placeholder="请输入" />
            )}
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
}

export default Form.create()(QueryPlan);
